<route lang="json5">
{
  meta: {
    auth: true,
  },
}
</route>

<template>
  <div ref="boxRef" class="overflow-y-scroll w-full h-full">
    <div class="flex flex-col gap-y-2 items-start">
      <use-label text="上传图片" />
      <p>输出base64：</p>
      <use-upload-image v-model="data.image1" :max-size="10" />
      <p>添加水印，并输出base64：</p>
      <use-upload-image v-model="data.image2" :max-size="10" water-mark="一柯小白菜" />
      <p>添加水印，用API(假的)上传文件：</p>
      <use-upload-image v-model="data.image2" :max-size="10" water-mark="水印" :api="uploadFile" />
      <use-file-select />

      <use-label text="各种选择" />
      使用默认（string[]）：
      <use-select v-model="data.value2" :options="OPTIONS" is-array />
      使用API ：
      <use-select v-model="data.value3" :api="getMockList" label-name="name" value-name="id" />
      使用默认（纯对象 Record&lt;string, IValue&gt;）+ Api + 监听change ：
      <use-select
        v-model="data.value4"
        :options="{ 选项1: 1, 选项2: 2, 选项3: 3, 选项4: 4, 选项5: 5, 选项6: 6 }"
        is-object
        :api="getMockList"
        label-name="name"
        value-name="id"
        @value-change="handleChange"
      />
      多选（max-tag固定=3）
      <use-select
        v-model="data.value5"
        multiple
        :options="['一', '一柯', '一柯小', '一柯小白', '一柯小白菜', '一柯小白菜菜菜菜菜菜菜菜']"
        is-array
        class="truncate"
        :max-tag-count="3"
      />
      多选（plus魔改版）
      <use-select
        v-model="data.value5"
        multiple
        :options="['一', '一柯', '一柯小', '一柯小白', '一柯小白菜', '一柯小白菜菜菜菜菜菜菜菜']"
        is-array
        class="truncate"
        use-plus
      />

      <use-label text="开关" />
      <a-switch type="round">
        <template #checked>ON</template>
        <template #unchecked>OFF</template>
      </a-switch>
      <a-radio-group type="button">
        <a-radio value="0">0</a-radio>
        <a-radio value="1">1</a-radio>
        <a-radio value="2">2</a-radio>
        <a-radio value="3">3</a-radio>
      </a-radio-group>

      <use-label text="延时（ 刷新/离开页面之后，依旧计时 ）" />
      <a-button @click="openAwait(10)" :disabled="Boolean(mailAwait)">
        {{ mailAwait ? `剩余${mailAwait}秒` : '点击开始' }}
      </a-button>

      <use-label text="密码 / 验证码？...格子输入框！" />
      直接使用
      <use-code-input v-model="data.value6" />
      使用插槽
      <use-code-input v-model="data.value6">
        <template #default="{ filled, next, over, focused }">
          <Icon
            :class="[
              {
                'text-orange-500': filled,
                'animate-bounce': next && focused,
                '!text-green-300': over,
              },
              ' transition-all duration-500',
              ' h-6 w-6',
            ]"
            icon="solar:star-bold-duotone"
          />
        </template>
      </use-code-input>
      <use-label text="时间范围（后端经常要传start和end两个字段，但是前端组件一般是数组）" />
      <a-range-picker show-time v-model:model-value="data.value7" v-bind="_DATE_PICKER_DEFAULT" />
      <div>modelValue:{{ data.value7 }}</div>
      <div>
        format:{{
          (() => {
            const [startTime, endTime] = data.value7 || []
            return { startTime, endTime }
          })()
        }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useStorageScroll } from '@/hooks/useStorageScroll'
import { getMockList } from 'api/test1'

const _DATE_PICKER_DEFAULT = DATE_PICKER_DEFAULT

const boxRef = ref<HTMLElement>()
useStorageScroll(boxRef, 'often-comps-main-box-scroll', { storage: 'sessionStorage' })

const { openAwait } = useGlobal()
const { mailAwait } = storeToRefs(useGlobal())

const OPTIONS = ['选项6', '选项5', '选项4', '选项3', '选项2', '选项1', '选项0']
const data = reactive({
  image1: '',
  image2: '',
  image3: '',
  value1: '',
  value2: '',
  value3: '',
  value4: '',
  value5: [],
  value6: '',
  value7: [],
})

function handleChange(e: any) {
  Message.info(JSON.stringify(e))
}

async function uploadFile(req: FormData) {
  const file = req.get('file') as File
  const url = await fileToUrl(file)
  await timeSleep(500)
  return { url }
}
</script>
